import { useState, useEffect } from "react";
import { Image } from "antd";
import "@/styles/newsDetails.css";

import BANNER5 from "assets/banner5.jpg";
import PIC08 from "assets/08.jpg";

import { detailNews,getNewsUpdate } from "@/utils/request/index";


function newsDetails() {

  const [newsUpdate, setNewsUpdate] = useState({
    category: [],
    lists: [],
  });

  function loadGetNewsUpdate(){
    getNewsUpdate().then((res) => {
      setNewsUpdate({
        category: res.category,
        lists: res.lists,
      });
    });
  }

  const [detail, setDetail] = useState({
    author: "",
    createTime: "",
    description: "",
    flow: "",
    title: "",
  });
  function loadDetailNews(){
    detailNews().then((res) => {
      setDetail({
        author: res.author,
        createTime: res.createTime,
        description: res.description,
        flow: res.flow,
        title: res.title,
      });
    });
  }
  

  useEffect(() => {
    loadGetNewsUpdate()
    loadDetailNews()
  }, []);

  return (
    <>
      <div id="bannerShow">
        <a href="#">
          <Image src={BANNER5} alt="" />
        </a>
      </div>
      <div id="breadcrumb">
        <div className="container">
          <a href="index">首页</a>
          <span> >> </span>
          <a href="newsUpdate">新闻动态</a>
        </div>
      </div>
      <div id="select" className="container">
        <div className="title">
          <h1 className="chinese">新闻动态</h1>
        </div>
        <div className="content clearfix">
          <div className="list">
            {newsUpdate.category.map((item,index)=>{
              return <a href="#" key={index}>{item.title}</a>
            })}
            <Image src={PIC08} alt="wqpl" />
          </div>
          <div className="newsDetails right">
            <h2>{detail.title}</h2>
            <div>
              <span>来源:</span>
              <span>作者:{detail.author}</span>
              <span>发布时间: {detail.createTime}</span>
              <span>{detail.flow} 次浏览</span>
              <span>分享到:</span>
            </div>
            <p className="bgf5f5f5">
              {detail.description}
            </p>
           
            <a href="#">
              上一篇： <span>夏季大促销，炎热中带来的清凉</span>
            </a>
            <a href="#">
              下一篇： <span>夏季精品 送清凉</span>
            </a>
          </div>
        </div>
      </div>
    </>
  );
}

export default newsDetails;
